<template>
	<view class="content">
		<!-- 搜索 -->
		<hjx-header></hjx-header>
		<!-- 轮播图 -->
		<view class="index-swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.image_src" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航-->
		<view class="index-cate">
			<view class="image-box" v-for="(item,index) in navList">
				<image :src="item.image_src" mode="widthFix"></image>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="index-floor">
			<view class="floor-group" v-for="(item,index) in floorList" :key="index">
				<!-- 楼层标题 -->
				<view class="floor-title">
					<image mode="widthFix" :src="item.floor_title.image_src"></image>
				</view>
				
				<view class="floor-list">
					<view class="image-box" v-for="(item2,index2) in item.product_list" :key="index2">
						<image mode="scaleToFill" :src="item2.image_src"></image>
					</view>
				</view>
				
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		data() {
			return {
				swiperList: [],
				navList: [],
				floorList: []
			}
		},
		onLoad() {
			this.getSwiperList();
			this.getNavList();
			this.getFloorList();
		},
		methods: {
			// getSwiperList() {
			// 	// uni.request({
			// 	// 	url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
			// 	// 	success: (res) => {
			// 	// 		console.log(res);
			// 	// 		this.swiperList = res.data.message;
			// 	// 	}
			// 	// })
			// 	// 改写后
			// 	this.$Https({
			// 			url: '/home/swiperdata'
			// 		})
			// 		.then((res) => {
			// 			this.swiperList = res.message;
			// 		})
			// },

			// 简化改写后 async 异步  await 等待
			async getSwiperList() {
				const res = await this.$Https({
					url: '/home/swiperdata'
				});
				console.log(res);
				this.swiperList = res.message;
			},

			async getNavList() {
				const res = await this.$Https({
					url: '/home/catitems'
				});
				console.log(res);
				this.navList = res.message;
			},
			async getFloorList() {
				const res = await this.$Https({
					url: '/home/floordata'
				});
				console.log(res);
				this.floorList = res.message;
			}
		}
	}
</script>

<style lang="scss">
	// 让轮播图在搜索框下边
	page {
		padding-top: 90rpx;
	}

	// 轮播图样式
	.index-swiper {
		swiper {
			width: 750rpx;
			height: 340rpx;

			image {
				width: 100%;
			}
		}
	}

	// 导航样式
	.index-cate {
		width: 750rpx;
		display: flex;

		.image-box {
			flex: 1;
			padding: 20rpx;

			image {
				width: 100%;
			}
		}
	}

	// 楼层样式		
	.index-floor{
		width: 750rpx;
		.floor-title{
			image{
				width: 100%;
			}
		}
		.floor-list{
			padding: 15rpx;
			.image-box{
				width: 240rpx;
				height: calc(240rpx * 386 / 232);
				float: left;
				&:nth-last-child(-n+4) {
					height: calc(240rpx * 386 / 232 /2);
					border-left: 10rpx solid #ffffff;
				}
				&:nth-child(2),&:nth-child(3) {
					border-bottom: 5rpx solid #ffffff;
				}
				&:nth-child(4),&:nth-child(5) {
					border-top: 5rpx solid #ffffff;
				}
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	// .floor-title {
	// 	height: 60rpx;
	// 	width: 100%;
	// 	display: flex;
	// }

	// .right-img-box {
	// 	display: flex;
	// 	flex-wrap: wrap;
	// 	justify-content: space-around;
	// }

	// .floor-img-box {
	// 	display: flex;
	// 	padding-left: 10rpx;
	// }
</style>
